/* 全局样式重置 - 消除浏览器默认样式差异 */
* {
    margin: 0;       /* 清除所有元素的外边距 */
    padding: 0;      /* 清除所有元素的内边距 */
    box-sizing: border-box; /* 盒模型计算方式：width包含border和padding */
    /* 示例：设置width:100%时，实际渲染宽度=父容器宽度-border-padding */
}
    
/* 主体布局容器 - 使用flex实现垂直三明治布局 */
body {
    display: flex;               /* 启用flex布局 */
    flex-direction: column;      /* 垂直排列子元素 */
    min-height: 100vh;           /* 最小高度为视口高度，防止内容不足时底部上浮 */
    /* 此时body形成三级结构：header、main-container、footer */
}

/* 头部样式 - 固定高度的导航栏 */
.main-head {
    height: 10vh;                /* 视口高度的10% */
    background-color: #A3C9A8;    
    display: flex;               /* 启用flex布局用于内部元素排列 */
    align-items: center;         /* 垂直居中子元素 */
    padding: 0 20px;             /* 左右内边距，上下为0 */
    z-index: 2;                  /* 层级高于其他元素（确保始终在最前） */
    flex-shrink: 0;              /* 禁止垂直压缩（防止main-container挤压头部） */
    /* 当页面滚动时，头部保持固定位置 */
}

/* 主内容区 - 包含侧边栏和内容区域的容器 */
.main-container {
    flex: 1;                     /* 填充剩余空间（计算公式：flex-grow:1） */
    display: flex;               /* 启用flex布局实现水平排列 */
    position: relative;          /* 创建定位上下文 */
    /* 此时形成水平两栏布局：侧边栏 + 内容区域 */
}

/* 侧边栏样式 - 固定宽度的导航区域 */
.main-sidebar {
    width: 15%;                  /* 父容器宽度的15% */
    background-color: #f1f1f1;   /* 浅灰色背景 */
}

/* 内容显示区域 - 主要信息展示区 */
.content-container {
    flex: 1;                     /* 占据剩余宽度（自动填充剩余空间） */
    position: relative;          /* 为子元素定位提供参考 */
    /* 此时形成弹性布局：侧边栏固定15%，内容区自动扩展 */
}

/* iframe样式 - 内嵌页面容器 */
#content-frame {
    width: 100%;                /* 充满父容器宽度 */
    height: 100%;               /* 充满父容器高度 */
    border: none;               /* 去除默认边框 */
    /* 注意：iframe内容高度需自行控制，否则可能出现内部滚动条 */
}

/* 底部样式 - 固定高度的页脚 */
.main-footer {
    height: 5vh;                /* 视口高度的5% */
    background-color: #333;     /* 深灰色背景 */
    color: white;               /* 白色文字 */
    display: flex;               /* 启用flex布局 */
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
    flex-shrink: 0;             /* 禁止垂直压缩 */
    /* 始终位于页面底部，与头部共同构成10vh + 85vh + 5vh的布局 */
}

/* 导航列表样式 - 垂直菜单系统 */
.main-sidebar ul {
    list-style: none;           /* 移除默认列表符号 */
    height: 100%;               /* 继承父容器高度（实现满高度菜单） */
    display: flex;              /* 启用flex布局 */
    flex-direction: column;    /* 垂直排列菜单项 */
    /* 此时ul成为垂直排列的flex容器 */
}

/* 导航列表项 - 均分高度的菜单项 */
.main-sidebar li {
    flex: 1;                   /* 均分剩余高度（每个li高度相同） */
    display: flex;              /* 启用flex布局（用于链接的定位） */
    border-bottom: 1px solid #ddd; /* 底部边框分隔线 */
    /* 8个菜单项均分侧边栏高度（85vh/8） */
}

/* 导航链接样式 - 可交互菜单项 */
.main-sidebar li a {
    flex: 1;                   /* 充满父容器（实现点击区域最大化） */
    display: flex;             /* 启用flex布局 */
    align-items: center;       /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    text-decoration: none;    /* 去除下划线 */
    color: #333;              /* 深灰色文字 */
    transition: all 0.3s;     /* 所有属性0.3秒过渡动画 */
    /* 交互设计：hover状态展示视觉反馈 */
}

/* 悬停交互效果 - 提升用户体验 */
.main-sidebar li a:hover {
    background-color: #b4c9b4;   /* 深灰色背景 */
    color: dimgray;             /* 白色文字 */
	
    /* 增强效果建议：添加transform实现微交互动画 */
}

.main-sidebar li a:focus{
	background-color: #A3C9A8;   /* 深灰色背景 */
	color: dimgray;             /* 白色文字 */
}

